{% extends "base_lang.html" %}

{% block title %}Blog - Sprunki Phase 3{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('Sprunki Blog') }}</h1>
            <p class="text-xl text-white mb-8">{{ _('Latest News and Updates from the Sprunki Universe') }}</p>
        </div>
    </div>
</section>

<!-- Blog Posts Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Featured Post -->
            <article class="col-span-full bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden">
                <img src="{{ url_for('static', filename='images/featured.webp') }}" 
                     alt="Featured Post" 
                     class="w-full h-64 object-cover">
                <div class="p-6">
                    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <span>{{ _('August 15, 2023') }}</span>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
                        {{ _('Exciting New Features Coming to Sprunki Phase 3') }}
                    </h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        {{ _('Discover the exciting new features coming to Sprunki Phase 3 in our latest update.') }}
                    </p>
                    <a href="/blog/exciting-new-features" class="text-primary hover:text-primary-dark">{{ _('Read More') }} →</a>
                </div>
            </article>

            <!-- Regular Posts -->
            <!-- Pro Tips Post -->
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden">
                <img src="{{ url_for('static', filename='images/pro-tips.webp') }}" 
                     alt="Pro Tips" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <span>{{ _('August 15, 2023') }}</span>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
                        {{ _('5 Pro Tips for Better Sprunki Mixes') }}
                    </h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        {{ _('Learn professional techniques and insider tips to create amazing mixes in Sprunki Phase 3.') }}
                    </p>
                    <a href="/blog/5-pro-tips" class="text-primary hover:text-primary-dark">{{ _('Read More') }} →</a>
                </div>
            </article>

            <!-- Community Spotlight Post -->
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden">
                <img src="{{ url_for('static', filename='images/community.webp') }}" 
                     alt="Community Spotlight" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <span>{{ _('August 10, 2023') }}</span>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
                        {{ _('Community Spotlight: Best Mixes of the Month') }}
                    </h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        {{ _('Discover the most creative and impressive Sprunki mixes from our community this month.') }}
                    </p>
                    <a href="/blog/community-spotlight" class="text-primary hover:text-primary-dark">{{ _('Read More') }} →</a>
                </div>
            </article>
        </div>

        <!-- Pagination -->
        <div class="mt-12 flex justify-center">
            <nav class="inline-flex rounded-md shadow">
                <a href="#" class="px-3 py-2 rounded-l-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <a href="#" class="px-3 py-2 bg-primary text-white">1</a>
                <a href="#" class="px-3 py-2 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">2</a>
                <a href="#" class="px-3 py-2 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">3</a>
                <a href="#" class="px-3 py-2 rounded-r-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </nav>
        </div>
    </div>
</section>
{% endblock %}
